import { ShElement } from './ShElement'


export class ShWinBtn extends ShElement {

    constructor() {
        super()

        this.$shadow.innerHTML = `
            <style>
                :host {
                    width: 3em;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                :host(:hover) {
                    background-color: var(--color-btn-hover);
                }
                :host(:active) {
                    background-color: var(--color-btn-active);
                }
                span {
                    width: calc(1em - 2px);
                    height: calc(1em - 2px);                    
                }
                :host(.min) span {
                    border-bottom: solid 1px black;
                }
                :host(.max) span {
                    border: solid 1px black;
                }
                :host(.restore) span {
                    position: relative;
                    left: 1px;
                    top: -1px;
                    width: calc(1em - 4px);
                    height: calc(1em - 4px);
                    border-top: solid 1px black;
                    border-right: solid 1px black;
                }
                :host(.restore) span::before {
                    display: block;
                    box-sizing: border-box; /* 不会继承，必须直接指定 */
                    position: relative;
                    content: ' ';
                    left: -2px;
                    top: 1px;
                    width: calc(1em - 4px);
                    height: calc(1em - 4px);
                    border: solid 1px black;
                }
                :host(.close) span::before,
                :host(.close) span::after {
                    position: absolute;
                    content: ' ';
                    background-color: black;
                    width: 1px;
                    height: 1.2em;
                }
                :host(.close) span::before {
                    transform: translate(0.4em, -0.2em) rotate(45deg);
                }
                :host(.close) span::after {
                    transform: translate(0.4em, -0.2em) rotate(-45deg);
                }
                :host(.close:hover) {
                    background-color: #ee0000;

                }
                :host(.close:active) {
                    background-color: #a00000;
                }
                :host(.close:hover) span::before,
                :host(.close:hover) span::after,
                :host(.close:active) span::before,
                :host(.close:active) span::after {
                    background-color: white;
                }
            </style>
            <span></span>
        `

        this.on('click', () => {
            if (this.hasClass('min')) {
                this.dispatchEvent(new Event('shev-win-min', { bubbles: true, composed: true }))
            }
            else if (this.hasClass('max')) {
                this.dispatchEvent(new Event('shev-win-max', { bubbles: true, composed: true }))
                this.removeClass('max')
                this.addClass('restore')
            }
            else if (this.hasClass('restore')) {
                this.dispatchEvent(new Event('shev-win-restore', { bubbles: true, composed: true }))
                this.removeClass('restore')
                this.addClass('max')
            }
            else if (this.hasClass('close')) {
                this.dispatchEvent(new Event('shev-win-close', { bubbles: true, composed: true }))
            }
        })
    }
}
customElements.define('sh-win-btn', ShWinBtn)
